<utils-iframe-html>
  <script>
  var tag = this;
  tag.fn = {};
  tag.on('mount', function(){
    var
      iframe = document.createElement('iframe'),
      frameDoc;
    tag.root.appendChild(iframe);
    frameDoc = iframe.document || iframe.contentWindow.document;
    frameDoc.open();
    frameDoc.writeln(opts.content);
    frameDoc.close();
  });
  </script>
</utils-iframe-html>

<utils-raw>
  <script>
  var tag = this;
  tag.fn = {};
  tag.on('mount', function(){
    tag.root.innerHTML = opts.content;
  });
  </script>
</utils-raw>


<!-- 弹出框 -->
<utils-modal>
  <style scoped>
  .modal-mask{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .4;
  }
  .modal-container{
    position: fixed;
    left: 50%;
    box-shadow: 0 0 10px #666;
    background: #fff;
    border-radius: 5px;
  }
  .modal-container .header{
    height: 40px;
    border-bottom: 1px solid #ebebeb;
    position: relative;
  }
  .modal-container .header h3{
    text-align: center;
    line-height: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
  }
  .modal-container .header a{
    position: absolute;
    right: 15px;
    top: 13px;
    font-size: 14px;
    color: #ccc;
  }
  .modal-container .header a:hover{ border: none }
  .modal-container .content{
    text-align: center;
    padding: 20px;
    min-height: 60px;
  }
  .modal-container .btn-group{
    height: 50px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
  }
  .modal-container .btn-group button{
    width: 90px;
    margin: 0 15px;
  }
  </style>

  <!-- 弹窗主体 -->
  <div if="{open}" class="modal-container {animation: open}"
    style="width: {opts.w||360}px; height: {opts.h||200}px; z-index: {opts.z?Number(opts.z)+11:22}; top: {opts.top||'30%'}; margin-left: {opts.w?'-'+Number(opts.w/2):-180}px">
    <div class="header">
      <h3><yield from="title"/></h3>
      <a href="javascript:;" onclick={fn.close}><i class="icon-cancel"></i></a>
    </div>
    <div class="content">
      <yield from="content"/>
    </div>
    <div class="btn-group">
      <yield from="button"/>
      <button type="button" class="btn-gray" onclick={fn.close}>
        <yield from="close"/>
      </button>
    </div>
  </div>

  <!-- 遮罩层 -->
  <div if={open} onclick={fn.close}
    style="opacity: {opts.mask}; z-index: {opts.z||11}"
    class="modal-mask"></div>

  <script>
  var tag = this;
  tag.open = false;
  tag.fn = {
    close: function(){
      tag.update({
        open: false
      });
    },
    open: function(){
      tag.open = true;
      document.addEventListener('keydown', function(e){
        if(e.keyCode == 27) tag.fn.close();
      }, {once: true});
      tag.update();
    }
  };
  </script>
</utils-modal>
